<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import Map from 'ol/Map'
import { Layer } from 'ol/layer'
import { defaultMapStore } from '@/store'
import { Tile as TileLayer } from 'ol/layer'
import GeoJSON from 'ol/format/GeoJSON'
import { LayerType } from '@/types/index.d.ts'

const prefix = import.meta.env.VITE_BASE_URL
const { proxy }: any = getCurrentInstance()
const geojson: GeoJSON = new GeoJSON()
let map: Map
const mapSrc = ['/images/ditu_04_up.png', '/images/ditu_04_down.png',
  '/images/ditu_06_up.png', '/images/ditu_06_down.png']
const ditu04 = ref(mapSrc[1])
const ditu06 = ref(mapSrc[2])
onMounted(() => {
  map = defaultMapStore().getMap()
})
const zoomToView = () => {
  const map: Map = defaultMapStore().getMap()
  const center = defaultMapStore().getToggleCenter()
  map.getView().animate({
    center,
    zoom: map.getView().getZoom()! + 1,
    duration: 500
  })
}
const toggleMap = (item: String) => {
  const map: Map = defaultMapStore().getMap()
  map.getAllLayers().forEach((layer: Layer) => {
    if (layer instanceof TileLayer) {
      map.removeLayer(layer)
    }
  })
  switch (item) {
    case mapSrc[0] || mapSrc[3]:
      ditu04.value = mapSrc[1]
      ditu06.value = mapSrc[2]
      map.addLayer(proxy.$addTiandituLayer(LayerType.矢量底图))
      map.addLayer(proxy.$addTiandituLayer(LayerType.矢量注记))
      break
    case mapSrc[1] || mapSrc[2]:
      ditu04.value = mapSrc[0]
      ditu06.value = mapSrc[3]
      map.addLayer(proxy.$addTiandituLayer(LayerType.地形晕渲))
      map.addLayer(proxy.$addTiandituLayer(LayerType.地形注记))
      break
  }
}
const handleCommand = (item: String) => {
  const map: Map = defaultMapStore().getMap()
  switch (item) {
    case 'measureDistance':
      // measureDistance()
      new proxy.$measureControl(map)
      // if (isMeasure) {
      //   map.getAllLayers().forEach((layer: Layer) => {
      //     if (layer.get('name') === '测距') {
      //       map.removeLayer(layer)
      //     }
      //   })
      //   measureDistance()
      //   isMeasure = false
      // } else {
      //   map.getAllLayers().forEach((layer: Layer) => {
      //     if (layer.get('name') === '测距') {
      //       map.removeLayer(layer)
      //     }
      //   })
      //   isMeasure = true
      // }
      break
    case 'equalLine':
      break
    case 'windCircle':
      break
  }
}

const zoomTo = (zoomType: 'zoomIn' | 'zoomOut') => {
  const map: Map = defaultMapStore().getMap()
  let zoom: number = map.getView().getZoom()!
  switch (zoomType) {
    case 'zoomIn':
      map.getView().animate({ zoom: zoom + 1, duration: 250 })
      break
    case 'zoomOut':
      map.getView().animate({ zoom: zoom - 1, duration: 250 })
      break
  }
}
const fullScreen = () => {
  if (document.fullscreenElement === null) {
    document.body.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<template>
  <view class="maptools-view">
    <view class="sidebar" @click="zoomToView">
      <view class="iconfont">&#xe619;</view>
    </view>
    <view class="main">
      <el-dropdown trigger="click" class="maptools-item">
        <view>
          <i class="iconfont">&#xe606;</i>
          <text class="wenzi">地图</text>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </view>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-plus">
              <img v-lazy="prefix + ditu04" alt="矢量地图" @click="toggleMap(ditu04)">
              <img v-lazy="prefix + ditu06" alt="地形地图" @click="toggleMap(ditu04)">
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown trigger="click" class="maptools-item" @command="handleCommand">
        <view>
          <i class="iconfont">&#xe61f;</i>
          <text class="wenzi">工具</text>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </view>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-plus" command="measureDistance">
              <el-checkbox label="测距" />
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus" command="equalLine">
              <el-checkbox label="等距线" />
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus" command="windCircle">
              <el-checkbox label="风圈" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <view class="zoomIn" @click="zoomTo('zoomIn')">
        <i class="iconfont">&#xe713;</i>
        放大
      </view>
      <view class="zoomOut" @click="zoomTo('zoomOut')">
        <i class="iconfont">&#xe611;</i>
        缩小
      </view>
    </view>
    <el-button size="large" class="btn" @click="fullScreen">全屏</el-button>
  </view>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

.maptools-view {
  @include positionTopRight(absolute, 3rem, 2rem);
  @include flex(space-around, center);
  z-index: 1000;

  .sidebar {
    cursor: pointer;

    .iconfont {
      @include positionTopRight(absolute, 0.03rem, 7.15rem);
      @include wHbgc(0.74074rem, 0.74074rem);
      @include flex(center, center);
      font-size: 0.48148rem;
      color: #0078ff;
      border-radius: 0.05556rem;
      box-shadow: 0 0 0.09259rem 0 rgba(0, 0, 0, .24);
    }
  }

  .main {
    @include flex(space-between, center);
    height: 0.74074rem;
    background-color: #fff;
    margin: 0 0.15rem;
    border-radius: 0.05556rem;
    box-shadow: 0 0 0.09259rem 0 rgba(0, 0, 0, .24);

    view {
      width: 1.4rem;
      height: 0.55556rem;
      line-height: 0.55556rem;
      border-right: 1px dotted #ccc;
      margin-left: 0.1rem;
      cursor: pointer;

      &:nth-child(3) {
        text-align: center;
        margin-left: 0;
        font-size: 0.3rem;
      }

      &:last-child {
        border-right: none;
        text-align: center;
        margin-left: 0;
        font-size: 0.3rem;
      }

      .iconfont {
        font-size: 0.3rem;
        margin-right: 0.05rem;
      }

      .wenzi {
        color: #000;
        font-size: 0.3rem;
      }

      .el-icon {
        display: none;
      }
    }
  }

  .btn {
    width: 1rem;
    height: 0.8rem;
    font-size: 0.25rem;
    background-image: linear-gradient(90deg, #0093f1, #1d78ed);
    border-radius: 0.1111rem;
    border: #1d78ed;
    color: #fff;
  }
}

.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}

.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;

  &::before {
    border-top-color: #ffcc33;
  }
}

.ol-tooltip-measure:before,
.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
</style>
